<template>
    <div id="personcard">
    	<div class="music">
            <i class="icon icon-music" num="2" :class="{musicmove:iscircle}" @click="iscircle=!iscircle"></i>
            <audio id="aud" :src="medioData" loop="loop" autoplay="autoplay"></audio>
       </div>
        <section class="card-content">
            <div class="page page-on-center">               
                <div class="card-content" v-cloak ref="parentScroll">
                    
                    <!--背景图片-->
                    <div class="top-groundimg" :style="{backgroundImage: 'url(' + detailData.cclogo + ')'}"></div>
                    <!--个人名帖内容-->
                    <div class="personal-box">
                        <div class="personal-main">
                            <!--头像，姓名等基本信息-->
                            <div class="personal-card personcard">
                                <div class="personal-top">
                                    <div class="top-info">
                                        <span class="top-info-logo">
                                            <img :src="detailData.cplogo">
                                        </span>
                                        <span class="top-info-name">{{detailData.cname}}</span>
                                        <div v-if="isowncard" class="cgmusic musicchange" id="musicchange">
                                            <router-link class="follow musicchange" :to="{path:'/card/addMusic',query:{id:detailData.id}}">
                                                <i class="iconfont icon-yinle"></i>
                                            </router-link>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="authentication personcard">
                                        <a @click="showcredit" href="javascript:;" class="action-isok">
                                            <label class="isok-text">实名认证</label>
                                            <span class="isok-icon"><i class="iconfont icon-renzheng1"></i> {{detailData.bcredit ? '已认证':'未认证' }}</span>
                                        </a>    
                                        <a href="javascript:;" class="zmxy">
                                            <label class="zmxy-text">芝麻信用</label>
                                            <span class="zmxy-icon"><i class="iconfont icon-zhimaxinyong"> </i> 未绑定</span>
                                        </a>
                                        <a href="javascript:;" class="zmxy">
                                            <label class="zmxy-text">活跃度</label>
                                            <span class="zmxy-icon"><i class="iconfont icon-huoyuedu"> </i> {{detailData.icardscore}}</span>
                                        </a>
                                    </div> 
                                <div class="mt-info">
                                    <p class="mt-ifno-item"><label for="">帖主信息：{{detailData.crealname}}</label></p>
                                    <p class="mt-info-items">
                                        <span>荣誉：{{detailData.cusergrade}}</span>
                                        <span>阿斗币：{{detailData.iuserscore?detailData.iuserscore:0}}</span>
                                        <span>粉丝：{{detailData.ifoccount?detailData.ifoccount:0}}</span>
                                    </p>
                                </div>


                                <div v-if="!isowncard" class="oparete">
                                    <div class="pt-right isfoc" id="isfoc">
                                        <span @click="toggleFocus(detailData.focid)" class="follow isfoc">{{detailData.focid ? '取消关注': '关注'}}</span>
                                    </div>
                                    <div class="pt-right isfoc" id="iscollect">
                                        <span @click="toggleCollect(detailData.colid)" class="follow iscollect">{{detailData.colid ? '取消收藏': '收藏'}}</span>
                                    </div>
                                    <div class="pt-right istalk" id="istalk">
                                        <span @click="toReply" class="follow istalk">留言</span>
                                    </div>
                                </div>
                                <div v-else class="oparete">
                                    <div class="pt-right" id="isartice">
                                        <router-link class="follow" :to="{path:'/card/addTrend',query:{id:detailData.id}}">发动态</router-link>
                                    </div>
                                    <div class="pt-right" id="isword">
                                        <router-link class="follow " :to="{path:'/card/addArticle',query:{id:detailData.id}}">发文章</router-link>
                                    </div>
                                    <div class="pt-right" id="isproduct">
                                        <span @click="toProRoute" class="follow" :class="{noallowed:!detailData.bcredit}">发产品</span>
                                    </div>
                                </div>
                               
                                <div class="staff">
                                    <span class="placeTitle">◉ 名帖简介</span>
                                    <div v-if="detailData.cdesc" class="personal-about personcard">
                                    	
                                        {{detailData.cdesc.replace(reg,'')}}
                                    </div>
                                </div>   

                                <div class="staff">
                                    <!--个人标签-->
                                    <span class="placeTitle">◉ 联系方式</span>
                                    <div class="personal-data personcard">
                                        <span v-if="detailData.cindustry" class="cindustry"><i class="iconfont icon-xingye1"></i> 行业：{{detailData.cindustry}}</span>
                                        <span v-if="detailData.ccompany" class="ccompany"><i class="iconfont icon-youxiang"></i> 公司：{{detailData.ccompany}}</span>
                                        <span v-if="detailData.cdepartment" class="cdepartment"><i class="iconfont icon-youxiang"></i> 部门：{{detailData.cdepartment}}</span>
                                        <span v-if="detailData.cpost" class="cpost"><i class="iconfont icon-youxiang"></i> 职位：{{detailData.cpost}}</span>
                                        <span class="clogtel" style="display:flex;height:auto;">
                                            <i class="iconfont icon-shouji"></i>&nbsp;电话： 
                                            <span style="display:flex;height:auto;flex-direction:column;padding:0;">
                                                <a v-for="(item,index) in arrTel" :key="index" :href="'tel:'+item" class="external" v-if="item.length>0">{{item}}&nbsp;&nbsp;<i class="el-icon-phone-outline"></i></a>
                                            </span>
                                        </span>
                                        <span v-if="detailData.cemail" class="cemail"><i class="iconfont icon-youxiang"></i> 邮箱：{{detailData.cemail}}</span>
                                        <span v-if="detailData.ctechtags" class="ctags"><i class="iconfont icon-biaoqian"></i> 标签：{{detailData.ctechtags}}</span>
                                        <span v-if="detailData.ccurl" class="ccurl"><i class="iconfont icon-youxiang"></i> 公司网址：<a :href="'http://'+detailData.ccurl">{{detailData.ccurl}}</a></span>
                                        <span v-if="detailData.alladdress" class="alladdress"><i class="iconfont icon-dizhi"></i> 地址：{{detailData.alladdress}}<a id="card-map" @click="showmap"><i class="iconfont icon-dingwei" style="color: #1ACCAC; margin-left: 1rem;"></i></a></span>
                                    </div>
                                </div>
                            </div>
                            <!--动态，视频，问答-->
                            <div class="myself" ref="myself">
                                <div class="myself-header">
                                    <div class="nav">
                                        <a @click="changeTab(item)" :class="{active:selected==item.path.query.select}" v-for="(item,index) in tabs" :key="index" >
                                            <p >{{item.tip}}</p>
                                        </a>
                                    </div>
                                   
                                    <keep-alive>
                                        <router-view></router-view>
                                    </keep-alive>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="bottom-oparete">
            <div v-if="!isowncard && hascard" class="bMain">
                <a @click="toaddcard" ><i class="iconfont icon-menu-build-bg"> </i> 创建名帖</a>
                <a @click="showcode"><i class="iconfont icon-tongxunlu"> </i> 添加至通讯录</a>
                <a @click="tohome" ><i class="iconfont iicon-shouye"> </i> 返回首页</a>
            </div>
            <div v-else-if="!isowncard && !hascard" class="bMain">
                <a @click="toaddcard" ><i class="iconfont icon-menu-build-bg"> </i> 创建名帖</a>
                <a @click="showcode" ><i class="iconfont icon-tongxunlu"> </i> 添加至通讯录</a>
                <a @click="toaddcard"  ><i class="iconfont icon-shouye"> </i> 创建名帖</a>
            </div>
            <div v-else class="bMain">
                <a @click="editCard(detailData.id)" v-if="isowncard"><i class="iconfont icon-20"> </i> 编辑名帖</a>
                <a @click="toaddcard" ><i class="iconfont icon-menu-build-bg"> </i> 创建名帖</a>
                <a @click="tohome"><i class="iconfont icon-shouye"> </i> 返回首页</a>
            </div>            
        </div>

        <!--二维码弹框-->
        <el-dialog
        class="cardqrcodearent"
        :visible.sync="erweimaVisible"
        width="100%">
            <div class="content-block" style="height: 280px;width: 100%; ">
                <div id="qrcode" style="text-align:center">
                    <p style="margin:1em 0;font-size: 20px;">长按识别加入通讯录</p>
                    <img style="width:70%;" :src="imgsrc">
                </div>
            </div>
        </el-dialog>
        <!--地图-->
        <el-dialog
        class="cardamaparent"
        title="地址"
        :visible.sync="mapVisible"
        width="100%">
            <div class="cardamap">
                <div class="content-block" style="height: 70vh;width: 100%; ">
                        <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
                        <el-amap-marker :position="marker.position"></el-amap-marker>
                        </el-amap>
                </div>
            </div>
        </el-dialog>
        <!--认证框-->
        <mt-popup v-model="isshowcreditpopup" position="bottom" class="cert-popup">
            <div class="list-block">
                <img v-if="certimg.file" :src="certimg.url" alt="" />
            </div>
            <div class="content-block">
                <p>上传凭证</p>
                <form id="form-company-up">
                <p>
                <label class="upfile-img">+
                    <input type="file" @change="chooseCertImg" name="files" id="cert-files" style="display:none" accept="image/*">
                </label>
                </p>
                </form>
                <span  @click="sendCertImg" class="button-pic">提交</span>
            </div>
        </mt-popup>
    </div>
</template>

<script>
import Vue from 'vue'
import {baseUrl} from '@/config/env.js'
import {tabs} from '@/params/cardTab.js'
import {getCardDetail,getMusic,cardLists,Focus,Collect} from './card.js'
import QRCode from 'qrcode'  
import {fetchLogin} from '../../config/fetch.js'
import wx from 'weixin-js-sdk'
import AMap from 'vue-amap';
Vue.use(AMap);
AMap.initAMapApiLoader({
  key: 'b02674c30e6ee45bdfb3c21d9c0b9c69',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
})
Vue.prototype.$AMap=AMap


const reg = /<[^>]+>|&[^>]+;/g;  
let share = false;
export default {
    async beforeRouteEnter(to,from,next){
        if(!sessionStorage.userinfos){
            let responseData = fetchLogin('/user/ssoLogin.shtml?sessionid='+sessionStorage.sid,{},'GET');
            await responseData.then((res)=>{
                                if(res.result==1){
                                    let headimg=res.data.user.cheadimage;
                                    if(headimg.indexOf('http:')==-1){
                                        headimg=decodeURIComponent(headimg);
                                    }
                                    sessionStorage.setItem('uimg',headimg);
                                    sessionStorage.setItem('username',res.data.user.crealname);
                                    let infostring=JSON.stringify(res.data.infos);
                                    sessionStorage.setItem('userinfos',infostring);
                                }
                            })
        }
        next()
    },
    data () {
      return {
        isclose:false,
        arrTel:[],
        isshowcreditpopup:false,
        certimg:'',
        reg:reg,
        tabs:tabs,
        baseUrl:baseUrl,
        hascard:false,
        //控制背景音乐图标的旋转
        iscircle:true,
        popupVisible:false,
        erweimaVisible:false,
        mapVisible:false,
        selected:'1',
        //获取明细的参数
        detailajax:{
            id:'',
            uid:''
        },
        detailData:'',
        medioData:'',
        imgsrc:'',//二维码图片
        /****高德地图相关数据*****/
          zoom: 15,
          center: [121.5273285, 31.21515044],
          marker: {
            position: [121.5273285, 31.21515044],
          },
        /****高德地图相关数据end*****/
      };
    },
    computed:{
        isowncard(){//判断是否是属于自己的名片
            var thisuid=this.$route.query.uid
            var loginuid=sessionStorage.getItem('uid')
            if(thisuid==loginuid){
                return true
            }else{
                return false
            }
        }
    },
    watch:{
        iscircle(curValue){
            var musicDom=document.querySelector('#aud')
            if(curValue){
                autoPlayAudio('aud')
                // musicDom.play()
            }else{
                musicDom.pause()
            }
        }
    },
     methods:{
        toClose(){
            this.isclose = true;
        },
        // audioAutoPlay(id){
        // 　　var audio = document.getElementById(id),
        // 　　　　play = function(){
        // 　　　　　　audio.play();
        // 　　　　　　document.removeEventListener("touchstart",play, false);
        // 　　　　};
        // 　　audio.play();
        // 　　document.addEventListener("WeixinJSBridgeReady", function () {//微信
        // 　　　　play();
        // 　　}, false);
        // 　　document.addEventListener('YixinJSBridgeReady', function() {//易信
        // 　　　　play();
        // 　　}, false);
        // 　　document.addEventListener("touchstart",play, false);
        // },
        autoPlayAudio(id) {
            wx.config({
                // 配置信息, 即使不正确也能使用 wx.ready
                debug: false,
                appId: '',
                timestamp: 1,
                nonceStr: '',
                signature: '',
                jsApiList: []
            });
            wx.ready(function() {
                var globalAudio=document.getElementById(id);
                globalAudio.play();
            });
        },
        editCard(id){
            this.$router.push({path:'/mine/editDetail',query:{cardid:id}})
        },
        tohome(){
            this.$router.push({path:'/search'});
        },
        toaddcard(){
            //创建名帖
            this.$router.push({path:'/mine/addCard?type=3'});
        },
        toProRoute(){
            let self=this
            if(!self.detailData.bcredit){
                self.$message({
                        duration: 2000,
                        message: '该功能需要认证才能使用',
                        type: 'error'
                    })
                return false
            }else{
                self.$router.push({path:'/card/addProduce',query:{id:self.detailData.id}})
            }
        },
        //跳转到留言页面
        toReply(){
            let icardid=this.$route.query.id
            let icarduid=this.$route.query.uid
            this.$router.push({path:'/reply',query:{icardid:icardid,icarduid:icarduid,cname:this.detailData.cname}});
        },
        //收藏与取消收藏
        toggleCollect(cid){
            var ajaxurl='',sendjson={}
            var icardid=this.$route.query.id
            if(cid){
                ajaxurl='/collect/removeCollect'
                sendjson={'ids':cid}
            }else{
                ajaxurl='/collect/saveCollect'
                sendjson={'icardid':icardid}
            }

            let self = this;
            let responseData = Collect(ajaxurl,sendjson);
            responseData.then((res) => {
                if(res.result==1){
                    if(cid){
                       self.$message({
                            duration: 2000,
                            message: '取消收藏成功',
                            type: 'success'
                        })
                       this.detailData.colid=''
                    }else{
                       self.$message({
                            duration: 2000,
                            message: '收藏成功',
                            type: 'success'
                        })
                       this.detailData.colid=res.data.id
                    }
                }else{
                    self.$message({
                        duration: 2000,
                        message: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        //发起认证
        showcredit(){
            if(!this.detailData.bcredit && this.isowncard){
                this.isshowcreditpopup=true
            }
        },
        //选择图片
        chooseCertImg(e){
            var file = e.target.files[0]
            var src = window.URL.createObjectURL(file);
            this.certimg={file:file,url:src}
        },
        //提交认证
        sendCertImg(){
             var cardid=this.$route.query.id
             var _this=this
             var formData=new FormData();
             formData.append('files',this.certimg.file)
             formData.append('icertid',cardid)
            this.$axios.post(this.httpurl('cert/saveCert'),formData)
            .then(response=>{
                var data=response.data
                if(data.result==1){
                    _this.isshowcreditpopup=false
                    _this.$message({
                                        duration: 2000,
                                        message: '认证成功待审核',
                                        type: 'success'
                                    })
                }else{
                    _this.$message({
                        duration: 2000,
                        message: data.msg,
                        type: 'error'
                    })
                }
            })
        },
        //关注与取消关注
        toggleFocus(fid){
            let ajaxurl='',sendjson={}
            let icardid=this.$route.query.id
            let ifocusuid=this.$route.query.uid
            if(fid){
                ajaxurl='/focuson/removeFocusOn'
                sendjson={'ids':fid}
            }else{
                ajaxurl='/focuson/saveFocusOn'
                sendjson={'icardid':icardid,'ifocusuid':ifocusuid}
            }
            let self = this;
            let responseData = Focus(ajaxurl,sendjson);
            responseData.then((res) => {
                if(res.result==1){
                    let userInfo = JSON.parse(sessionStorage.userinfos)
                    if(fid){
                        self.$message({
                                        duration: 2000,
                                        message: '取消关注成功',
                                        type: 'success'
                                    })
                        self.detailData.focid=''
                        userInfo.ifoccount--
                        sessionStorage.setItem('userinfos',JSON.stringify(userInfo))
                    }else{
                        self.$message({
                            duration: 2000,
                            message: '关注成功',
                            type: 'success'
                        })
                        self.detailData.focid=res.data.id
                        if(userInfo == null){
                                userInfo = {}
                                userInfo.ifoccount=0
                                userInfo.iartcount=0
                                userInfo.ibfoccount=0
                        }else if(!userInfo.ifoccount){
                                userInfo.ifoccount=0
                            }
                       userInfo.ifoccount++
                       sessionStorage.setItem('userinfos',JSON.stringify(userInfo))
                    }
                }else{
                    self.$message({
                        duration: 2000,
                        message: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        changeTab(item){
            this.selected = item.path.query.select;
            $('.mescroll').css({
                marginTop:0
            })
            this.$router.replace({path:item.path.path+'?id='+this.$route.query.id+'&uid='+this.$route.query.uid+'&select='+item.path.query.select})
        },
        qrcode (content) {  
            let self = this;
            QRCode.toDataURL(content)
            .then(url => {
                self.imgsrc = url
            })
            .catch(err => {
                console.error(err)
            })
        },  
        showmap(){
             this.mapVisible=true
        },
        showcode(){
            this.erweimaVisible = true
        }
    },
    async mounted(){
        let self=this
        if(self.$route.query.select || self.$route.query.select == 0){
            self.selected = self.$route.query.select;
        }
        //判断当前用户是否拥有名帖
        let userInfo = JSON.parse(sessionStorage.userinfos)
        if(userInfo.icardcount>0){
            self.hascard = true
        }else{
            self.hascard = false
        }
        
        //获取名帖详情
        self.detailajax['id']=self.$route.query.id
        self.detailajax['uid']=self.$route.query.uid
        let responseData = getCardDetail(self.detailajax);
        responseData.then((res)=>{
            if(res.result === 1){
                let curData=res.data
                if(curData.cclogo){
                    curData.cclogo=baseUrl+curData.cclogo;
                }else{
                    curData.cclogo='./static/image/h4.jpg';
                }
                if(curData.cplogo){
                    curData.cplogo=baseUrl+curData.cplogo;
                }else{
                    curData.cplogo='./static/image/h4.jpg';
                }
                if(curData.cprovince!='请选择'){
                    curData.alladdress=curData.cprovince+curData.ccity+curData.cdistrict+curData.caddress
                }else{
                    curData.alladdress=''
                }
                //分享信息
                var shareData={
                    title:curData.cname+`的流名帖`,
                    desc:`流名帖-`+curData.cname +`\r\n  \r\n `+curData.cdesc.replace(reg,''),
                    qtitle:curData.cname?curData.cname:'',
                    img:curData.cplogo
                }
                sessionStorage.setItem('shareData',JSON.stringify(shareData))
                //二维码
                var cardstring=`
                    BEGIN:VCARD
                        FN:${curData.cname}
                        TEL;CELL:${curData.clogtel}
                        EMAIL;PREF;INTERNET:${curData.cemail}
                        NOTE:行业:${curData.cindustry};业务标签:${curData.ctags}
                        ADR;WORK;POSTAL:${curData.alladdress}
                        URL:${curData.ccurl}
                    END:VCARD`
                curData.cardcode=cardstring
                self.detailData=curData
                self.qrcode(cardstring);
                self.arrTel = self.detailData.clogtel.split(',')
            }
            //地图
            if(this.detailData.ilongitude){
                self.center=[+this.detailData.ilongitude,self.detailData.ilatitude]
                self.marker.position=[+this.detailData.ilongitude,self.detailData.ilatitude]
            }
        }).then(()=>{//获取背景音乐
            let responseM = getMusic(self.$route.query.id);
            responseM.then((res)=>{
                if(res.result == 1){
                    if(res.data[0].curl&&res.data[0].curl.indexOf('http')==-1){
                        self.medioData=self.baseUrl+res.data[0].curl
                    }else{
                        self.medioData=res.data[0].curl
                    }
                }
            })
        })  
    },
    async activated(){
        // console.log(666)
        this.arrTel = [];
        this.certimg = '';
        this.hascard=false;
        //控制背景音乐图标的旋转
        this.iscircle=true;
        this.popupVisible=false;
        this.erweimaVisible=false;
        this.mapVisible=false;
        this.selected='1';
        //获取明细的参数
        this.detailajax={
                        id:'',
                        uid:''
                    };
        this.detailData='';
        this.medioData='';
        this.imgsrc='';//二维码图片
        /****高德地图相关数据*****/
          this.zoom = 15;
          this.center = [121.5273285, 31.21515044];
          this.marker = {
            position : [121.5273285, 31.21515044]
          };
        /****高德地图相关数据end*****/

        $('.nav').css('position','relative')

        // 重新加载mounted的方法
        let self=this
        if(self.$route.query.select || self.$route.query.select == 0){
            self.selected = self.$route.query.select;
        }
        //判断当前用户是否拥有名帖
        let userInfo = JSON.parse(sessionStorage.userinfos)
        if(userInfo.icardcount>0){
            self.hascard = true
        }else{
            self.hascard = false
        }
        
        //获取名帖详情
        self.detailajax['id']=self.$route.query.id
        self.detailajax['uid']=self.$route.query.uid
        let responseData = getCardDetail(self.detailajax);
        responseData.then((res)=>{
            if(res.result === 1){
                let curData=res.data
                if(curData.cclogo){
                    curData.cclogo=baseUrl+curData.cclogo;
                }else{
                    curData.cclogo='./static/image/h4.jpg';
                }
                if(curData.cplogo){
                    curData.cplogo=baseUrl+curData.cplogo;
                }else{
                    curData.cplogo='./static/image/h4.jpg';
                }
                if(curData.cprovince!='请选择'){
                    curData.alladdress=curData.cprovince+curData.ccity+curData.cdistrict+curData.caddress
                }else{
                    curData.alladdress=''
                }
                //分享信息
                var shareData={
                    title:curData.cname+`的流名帖`,
                    desc:`流名帖-`+curData.cname +`\r\n  \r\n `+curData.cdesc.replace(reg,''),
                    qtitle:curData.cname?curData.cname:'',
                    img:curData.cplogo
                }
                sessionStorage.setItem('shareData',JSON.stringify(shareData))
                //二维码
                var cardstring=`
                    BEGIN:VCARD
                        FN:${curData.cname}
                        TEL;CELL:${curData.clogtel}
                        EMAIL;PREF;INTERNET:${curData.cemail}
                        NOTE:行业:${curData.cindustry};业务标签:${curData.ctags}
                        ADR;WORK;POSTAL:${curData.alladdress}
                        URL:${curData.ccurl}
                    END:VCARD`
                curData.cardcode=cardstring
                self.detailData=curData
                self.qrcode(cardstring);
                self.arrTel = self.detailData.clogtel.split(',')
            }
            //地图
            if(this.detailData.ilongitude){
                self.center=[+this.detailData.ilongitude,self.detailData.ilatitude]
                self.marker.position=[+this.detailData.ilongitude,self.detailData.ilatitude]
            }
        }).then(()=>{//获取背景音乐
            let responseM = getMusic(self.$route.query.id);
            responseM.then((res)=>{
                if(res.result == 1){
                    if(res.data[0].curl&&res.data[0].curl.indexOf('http')==-1){
                        self.medioData=self.baseUrl+res.data[0].curl
                    }else{
                        self.medioData=res.data[0].curl
                    }
                }
            })
        })  

    },
    updated(){
      
        if(this.$refs.myself){
            var s = this.$refs.myself.offsetTop;
        }
        this.s = s
        let self = this;
        var d = document.documentElement.clientHeight;
        var navHeight = $('.myself-header').height();
        var r = d-navHeight;
        if(self.s){
            $(document).scroll(function(){
                
                var selected = self.selected;
                var scrollTop = $(this).scrollTop();
               
                $('.mescroll').css({
                    minHeight:(d-110)+'px'
                })
                
                if(scrollTop >self.s){
                    
                    $('.nav').css({
                            position: 'fixed',
                            width: '100%',
                            top: 0,
                            height: 'auto',
                            zIndex: '1000'
                    })
                    $('.mescroll'+selected).css({
                        marginTop:'55px'
                    })

                }
                else if(scrollTop<self.s && $('.nav').css('position') == 'fixed'){
                    $('.nav').css({
                        position: 'relative',
                        top:0
                    })
                    $('.myself .mescroll').css({marginTop:0})
                    $(document).scrollTop(self.s)
                    
                }
            });
        }
        
    },
}
</script>
<style>
    .cardamaparent .el-dialog{
        margin-top: 0 !important;
        position: absolute;
        width: 90% !important;
        height: 80%;
        top: 10%;
        margin: auto;
        left: 0;
        right: 0;
    }
    .cardqrcodearent .el-dialog{
        margin-top: 0 !important;
        position: absolute;
        width: 90% !important;
        height: 60%;
        top: 20%;
        margin: auto;
        left: 0;
        right: 0;
    }
    .cardamaparent .el-dialog__body, .cardqrcodearent .el-dialog__body{
        padding:0;
    }
</style>

<style scoped>
.toptitle{
    position: fixed;
    top: 0;
    width: 100%;
    height: 3rem;
    z-index: 1000;
    padding: 0 1rem;
    line-height: 3rem;
    background: rgba(0,0,0,0.5);
    color: #ffffff;
}
.top-info{
    display: flex;
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    margin-top: -3rem;
}
.top-info-logo img{
    width: 6rem;
    height: 6rem;
    border: 0.3rem solid #ffffff;
    border-radius: 6rem;
    box-sizing: border-box;
}
.top-info-name{
    font-size:1.3rem;
}
.top-info-name,.cgmusic{
    margin-top:2rem;
    margin-left:0.5rem;
}
.mt-info{
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: auto;
    background: #fff;
    padding:.4rem 0rem .6rem 0rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.mt-info p{
    display: block;
    justify-content: space-between;
    width: 92%;
    margin: auto;
    padding: .5rem 0rem;
}
.mt-info p.mt-info-items{ display: block; width: 100%;}
.mt-info p label{ display: inline-block; background: #f9f9f9; color: #333; padding: .2rem .8rem; border-left: solid 3px #00AA76;}
.mt-info p span{ display: block; float: left; width: 33%; border-right: solid .05rem #eee; text-align: center; font-size: .9rem;}
.mt-info p span:last-child{ border: 0;}
.authentication{
    width:100%;
    display: flex;
    justify-content: space-around;
}
.authentication a {
    height: auto;
    width:33.33%;
    overflow: hidden;
    border-right: dashed .05rem #ddd;
    padding-bottom: 1rem;
}
.authentication a:last-child{ border: 0;}
.authentication a label{
    font-size:0.9rem;
    padding:0.5rem 0 0.25rem 0;
}
.authentication a.action-isok {
    display: block;
}
.authentication a.action-isok label {
    display: block;
    text-align: center;
    color:#333;
}
.authentication a.action-isok span.isok-icon {
    display: block;
    text-align: center;
    height: auto;
    color: rgb(255, 255, 255);
    background: rgb(245, 182, 93);
    border-radius: 100px;
    width: 79%;
    margin: auto;
    margin-top: .3rem;   
    min-height: 28px;
    line-height: 28px;
}
.authentication a.action-isok span.isok-icon i {
    font-size: 1rem;
}
.authentication a.zmxy {
    display: block;
}
.authentication a.zmxy label.zmxy-text {
    display: block;
    text-align: center;
    color: rgb(51, 51, 51);
}
.authentication a.zmxy span.zmxy-icon {
    display: block;
    text-align: center;
    height: auto;
    color: rgb(255, 255, 255);
    background: #00AA76;
    border-radius: 100px;
    width: 79%;
    margin: auto;
    margin-top: .3rem;
    min-height: 28px;
    line-height: 28px;
}
.authentication a.zmxy span.zmxy-icon i {
    font-size: 1rem;
}
.authentication a.lv {
    display: block;
}
.authentication a.lv label.lv-text {
    display: block;
    text-align: center;
    color: rgb(51, 51, 51);
}
.authentication a.lv span.lv-icon {
    display: block;
    width: 80%;
    text-align: center;
    height: auto;
    color: rgb(255, 255, 255);
    font-size: 0.7rem;
    margin: 0.5rem auto auto;
    background: rgb(47, 152, 252);
    border-radius: 100px;
}
.authentication a.lv span.lv-icon i {
    font-size: .9rem;
}
.staff {
    width: 100%;
    height: auto;
    margin-top: 1.2rem;
}
.staff span.placeTitle{ display: block;width: 94%; margin: auto; font-size:1rem; height: auto; overflow: hidden;padding-top: .8rem;}
.staffBox {
    height: auto;
    background: #f9f9f9;
    border-top: solid 0.01rem #ddd;
    padding-bottom: 1rem;
    overflow: hidden;
}
.staffBox .staff-one {
    display: block;
    width: 25%;
    height: auto;
    float: left;
    text-align: center;
    margin-top: 1rem;
}
.staffBox .staff-one img {
    display: block;
    width: 70%;
    margin: auto;
    height: auto;
    border-radius: 100px;
}
.staffBox .staff-one span {
    display: block;
    height: 1rem;
    font-size: .8rem;
    padding-top: .3rem;
    overflow: hidden;
}
.staff .staff-btn {
    position: relative;
    display: block;
    background: #f9f9f9;
    height:2.4rem;
    line-height:2.4rem;
    font-size: .8rem;
    display: flex;
    padding: 0 1rem;
    justify-content: space-between;
    background: #ddd;
}
.staff .staff-btn .staff-btn-title span{
    font-size:1rem;
}
.icon-music{width:25px;height:25px;background:url(../../../static/image/icon-muisc.png);background-size:100% 100%;display:block}
.music{position:fixed;right:.6rem;top:.6rem;z-index:9999;width:25px;height:25px;}
.musicmove{animation: circle 3s infinite linear;}
@keyframes circle{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
.oparete{
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
}
.oparete .pt-right{
    width:26%;
    height: 2.5rem;
    line-height:2.6rem;
    text-align:center;
    background:#fff;
    border: solid .05rem #eee;
    border-radius: 5px;
}
a.lv {
    margin-top:1rem;
    display: block;
}
a.lv label.lv-text {
    display: block;
    text-align: center;
    color: rgb(51, 51, 51);
}
 a.lv span.lv-icon {
    display: block;
    width: 80%;
    text-align: center;
    height: auto;
    color: rgb(255, 255, 255);
    font-size: 0.7rem;
    padding-top: 0.14rem;
    padding-bottom: 0.1rem;
    margin: 0.5rem auto auto;
    background: rgb(47, 152, 252);
    border-radius: 100px;
}
 a.lv span.lv-icon i {
    font-size: .9rem;
}
.isnotshare{
    width:100%;
    left:0;
}
.isshare{
    width:50%;
    left:0;
}
.shareadd{
    width:50%;
    right:0;
}


.clearfix::after {content: "";clear: both;display: block;overflow: hidden;font-size: 0;height: 0;}
</style>
<style scoped>
.card-content{overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;height:100%;position:relative;}
.card-content{overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;height:100%;position:relative;background-position:top;background-size:35%;z-index:1}
.top-groundimg{width:100%;height:10rem;background-size:100% 10rem;position:relative}
.personal-box{width:100%;height:auto;background:#f9f9f9}
.personal-main{width:100%;margin:auto;height:auto;box-sizing:border-box}
.personal-top{width:100%;height:auto;position: relative;}
.personal-top{
    padding:0 1rem;
    box-sizing:border-box;
}

.renzheng i{color:#ccc;font-size:1.2rem;}
.renzheng.already i{color:#2790A6}
.icon-renzheng.iscert.already{color:#2790A6}
.cgmusic i {font-size: 1.25em;color: #31c27c ;padding-left: .4rem;}

.personal-about{width:100%;height:auto;background:#fff;font-size:.9rem;line-height:1.5rem;color:#666;margin-top:-1.8rem;text-align:left;padding-left:.7rem;padding-right:.7rem;word-wrap:break-word;box-sizing:border-box;margin-top:.5rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;
overflow: hidden;line-height: 1.5rem; padding: .5rem 3%;}
.person-data,.personal-data{display:block;width:100%;height:auto;margin-top:.2rem; padding-top: .5rem;}
.person-data span,.personal-data span{display:block;height:2.8rem;background:#fff;font-size:.9rem;line-height:2.8rem;clear:both;padding-left:1rem;padding-right:2%}
.person-data span i,.personal-data span i{display:inline-block;color:#333;box-sizing:border-box}


/*下部tab*/
.nav{background-color: #fff;display: -webkit-box;display: -ms-flexbox;display: flex;text-align: center;border-bottom:0.05rem solid #eee;}
.nav a{padding: 17px 0;font-size: 15px;width: 33.33%;}
.nav a.active{border-bottom: 2px solid #1ACCAC;color: #1ACCAC;margin-bottom: -2px;}
/*认证弹框*/
.cert-popup{
    text-align: center;
    width: 100%;
    margin-bottom:3rem;
}
.cert-popup .list-block {
    width: 50%;
    text-align: center;
    margin: 10px auto 0;
}
.cert-popup .list-block img {
    width: 100%;
    
}
.cert-popup .content-block {
    margin: 35px 0;
    padding: 0 15px;
    color: #6d6d72;
    box-sizing: border-box;
}
.cert-popup p {
    margin: 1em 0;
}
.upfile-img {
    height: 50px;
    width: 50px;
    border: 1px solid #999;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 15px;
}
.button-pic {
    display: block;
    background: #2790A6;
    height: 2.8rem;
    color: #fff;
    text-align: center;
    line-height: 2.8rem;
    border-radius: 8px;
}
.changeColor{
    color:#666666;
}
.bottom-oparete{
    height: 3rem;
    line-height:3rem;
    position:fixed;
    flex: 1;
    bottom:0;
    width:100%;
    left: 0;
    background:#eee;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
}
.bMain{ width: 100%; flex: 1;}
.bottom-oparete a{ display: block !important; width: 33.33%; float: left; display: flex; text-align: center;}
.bottom-oparete a:first-child{ background: #ddd;}
.bottom-oparete a:last-child{ background: #ddd;}
</style>
